<template>
  <!-- <p>这是历史健康信息页面</p> -->

  <div style="width: 100%; height: 100%; min-width: 700px">
    <div class="historyReport_header">
      <span class="historyReport_header_title">
        &nbsp;
        <i class="el-icon-date" />
        历史健康信息
      </span>
    </div>

    <div class="historyReport_main">
      <div class="historyReport_main_main">
    <el-table
      v-loading="loading"
      :header-cell-style="{ background: '#ECF1FE' }"
      min-height="500px"
      :default-sort="{ prop: 'time', order: 'descending' }"
      highlight-current-row
      stripe
      :data="reportInfoList"
      border
    >
      <el-table-column prop="reportId" label="序列号" width="180">
      </el-table-column>
      <el-table-column prop="phoneNum" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="temperature" label="体温" width="180">
      </el-table-column>
      <el-table-column prop="contactor" label="接触史" width="180">
      </el-table-column>
      <el-table-column prop="trip" label="旅居史"> </el-table-column>
    </el-table>

      </div>
    </div>


  </div>
</template>

<script>
import { getReportInfoList } from "../../../api/report";
export default {
  data() {
    return {
      reportInfoList: [],
    };
  },
  created() {
    this.getHistoryReport();
  },
  methods: {
    getHistoryReport() {
      getReportInfoList()
        .then((res) => {
          console.log(res);
          this.reportInfoList = res;
          console.log(this.reportInfoList);
        })
        .catch((error) => console.log(error));
    },
  },
};
</script>
<style lang="scss" scoped>
.historyReport_header {
  background: #FFFFFF;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;

  .historyReport_header_title {
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
    border-left: 5px solid #21a6e6;
  }
}

.historyReport_main {
  margin: 30px 30px 0px 30px;
  width: calc(100% - 60px);

  .historyReport_main_header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;

    .historyReport_main_header_title {
      color: #919191;
      float: left;
      font-size: 14px;
      margin-left: 20px;
    }

    .historyReport_main_header_refresh {
      float: right;
      margin-left: 20px;
    }

    .historyReport_main_header_search {
      float: right;
      width: 260px;
    }
  }
}
</style>

<style lang="scss" scoped>

::v-deep .el-button--primary {
  color: #fff;
  background-color: #4875f6;
  border-color: #4875f6;
  -webkit-box-shadow: 0 5px 5px rgba(72,117,246,.15);
  box-shadow: 0 5px 5px rgba(72,117,246,.15);
}

::v-deep .el-button--primary:hover {
  background: #6d91f8;
  border-color: #6d91f8;
  color: #fff;
}

</style>